<template>
  <div class="echarts_container">
    <div id="dept_month_all_cost_echarts"></div>
  </div>
</template>

<script lang="ts">

import * as echarts from "echarts";
import { getByKeyApi } from "@/api/largeScreen";
export default {
  name: "deptMonthAllCost",
  data () {
    return {
      dataInfo: {},
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData (params = {}) {
      getByKeyApi("vipNumber").then((res) => {
        res.data.forEach(item=>{
          item.organAmountList = item.configValue.split("-").map(Number)
          item.organNameList = item.remark.split("-")
        })
        let dataInfo = {
          organAmountList:res.data[0].organAmountList,
          organNameList:res.data[0].organNameList
        }
        this.dataInfo = dataInfo
        // 切换页面回来之后echarts不渲染的问题(移除_echarts_instance_属性)
        const echartsDOM = document.getElementById("dept_month_all_cost_echarts")
        if (!echartsDOM) return;
        echartsDOM?.removeAttribute('_echarts_instance_')
        const myChart = echarts.init(echartsDOM);
        let _params = {}
        // 绘制图表
        myChart.setOption({
          tooltip : {
            trigger: 'axis',
            formatter: function (params){
              _params = params
              const str = params.map(v => `${v.marker} ${v.seriesName} ${v.value}`).join('<br />')
              return `${params[0].name} <br />
                      ${str}`
            }
          },
          grid: {
            left: '50',
          },
          xAxis : [
            {
              type : 'category',
              data : this.dataInfo.organNameList,
              splitLine: {
                show: false
              },

              axisLabel: {
                show: true,
                interval: 0,
                // rotate: 40,
                textStyle: {
                  color: '#FFFFFF',
                  align: 'center'
                },
              }
            }
          ],
          yAxis : [
            {
              type : 'value',
              name : '',
              nameTextStyle: {
                color: '#FFFFFF',
              },
              alignTicks: true,
              splitLine: {
                show: false
              },
              axisLine: {
                show: true,
              },
              axisLabel : {
                show: true,
                formatter: '{value} ',
                textStyle: {
                  color: '#ffffff',
                  align: 'right'
                }
              },
            },
          ],
          series : [
            {
              name: '',
              type: 'bar',
              data: this.dataInfo.organAmountList
            }
          ]
        });
      });
    }
  }
};
</script>

<style scoped lang="scss">
  .echarts_container {
    height: 100%;
    margin-top: 10px;
  }
  #dept_month_all_cost_echarts {
    width: 100%;
    height: 100%;
  }
</style>
